<!--<script>-->
<!--export default {-->
<!--  name: 'LoginView'-->
<!--}-->
<!--</script>-->

<template>
  <div id="app">
    <h1 style="text-align: center">模拟面试</h1>
    <Form
      ref="formInline"
      :model="formInline"
      :rules="ruleInline"
      @submit.native.prevent
    >
      <FormItem prop="user">
        <Input type="text" v-model="formInline.username" placeholder="Username">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input
          type="password"
          v-model="formInline.password"
          placeholder="Password"
          @on-enter="handleSubmit('formInline')"
        >
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem style="text-align: center">
        <Button type="primary" @click.prevent="handleSubmit('formInline')"
          >Signin</Button
        >
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      formInline: {
        username: "",
        password: "",
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur",
          },
          {
            type: "string",
            min: 3,
            message: "The password length cannot be less than 3 bits",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created () {
    // this.$router.be
    fetch('api/me')
      .then((res) => res.json())
      .then((json) => {
        console.log(json)
        if (json.status === 'OK') {
          this.$Message.info('已登录！')
          // this.$router.go(-1)
        }
      })
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const loginUrl = "/api/login";
          const data = this.formInline;
          // 向后端发送登录请求
          fetch(loginUrl, {
            method: "POST", // or 'PUT'
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
          })
            .then((res) => res.json())
            .then((data) => {
              if (data.status === "OK") {
                // 登录成功，跳转到用户界面，管理员或者普通用户
                this.$Message.success("Success!");
                console.log(data);
                if (data.data.username === "admin") {
                  this.$router.push("/admin");
                } else {
                  this.$router.push("/user");
                }
              } else {
                // 登录失败，抛出失败原因，后续处理
                throw data.message;
              }
            })
            .catch((err) => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  },
};
</script>

<style scoped>
form-item {
  text-align: center;
}
</style>
